<template>
    <div>
        <h1>会员显示</h1>
        <a href="/QY">权益展示</a>
        <br>
        <a href="/DJ">等级展示</a>
        <br>
        <a href="/">前往添加会员</a>
        <br>
        会员名称:
        <input type="text" v-model="find.uname">
        年龄:
        <input type="number" v-model="find.minage"> -
        <input type="number" v-model="find.maxage">
        等级:
        <select v-model="find.djid">
                            <option value=0>请选择</option>
                            <option v-for="d in dj" :value="d.Did">{{ d.Dname }}</option>
                        </select>
        <input type="button" value="查询" @click="listshow"> 
        <a href="https://localhost:7185/api/User/Dcint">导出</a>
        <table class="table">
            <thead>
                <tr>
                    <th>会员编号</th>
                    <th>会员名称</th>
                    <th>会员年龄</th>
                    <th>等级名称</th>
                    <th>图片</th>
                    <th>登录时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{d.Uid}}</td>
                    <td>{{ d.Uname }}</td>
                    <td>{{d.Age}}</td>
                    <td>{{ d.Dname }}</td>
                    <td>
                        <img :src="'https://localhost:7185/'+d.Img" style="width: 60px;height: 60px;">
                    </td>
                    <td>{{moment(d.Date).format('yyyy/MM/DD')}}</td>
                    <td>{{d.State?"启用":"禁用"}}</td>
                    <td>
                        <input type="button" :value="d.State?'禁用':'启用'" @click="UptState(d.Uid)">
                        <input type="button" value="修改" @click="Getupt(d.Uid)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            总条数:{{ fysy.totalnum }}条,总页数:{{ fysy.totalpage }}页,
            当前是第{{ find.pageindex }}页,每页显示{{ find.pagesize }}条
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(find.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(find.pageindex+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">
        页容量:
        <select v-model="find.pagesize" @change="listshow">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
            <option value="5">5条/页</option>
        </select>
        前往:
        <input type="number" v-model="find.pageindex">
        <input type="button" value="前往" @click="Shows">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useInfoStore } from '@/stores/info';
import { useRouter } from 'vue-router';
import moment from 'moment';


var info=useInfoStore();
var touer=useRouter();

//循环
const data=ref([{
     "Uid": 0,
      "Uname": "",
      "Age": 0,
      "Djid": 0,
      "Img": "",
      "Date": "",
      "Dname": "",
      "State":true
}])


//等级model
const dj=ref([{
    "Did": 0,
  "Dname": "",
  "State": true,
  "Qyname": ""
}])

//查询条件
const find=ref({
    uname:"",
    minage:0,
    maxage:0,
    djid:0,
    pageindex:1,
    pagesize:2
})


//翻页使用
const fysy=ref({
    totalnum:0,
    totalpage:0
})

//钩子
onMounted(() => {
    Shows();  
    Djlist();
})

//等级下拉框
const Djlist=()=>{
    axios.get("https://localhost:7185/api/User/GetDJ").then(res=>{
        dj.value=res.data;
    })
}

//显示
const Shows=()=>{
    axios.get("https://localhost:7185/api/User/GetUser",{params:find.value}).then(res=>{
        data.value=res.data.listt;
        fysy.value.totalnum=res.data.totalnum;
        fysy.value.totalpage=Math.ceil(fysy.value.totalnum/find.value.pagesize);
    })
}


//查询按钮
const listshow=()=>{
    find.value.pageindex=1;
    Shows();
}

//翻页
const FY=(vid:number)=>{
    if(vid>=1 && vid<=fysy.value.totalpage){
        find.value.pageindex=vid;
        Shows();
    }
}




//修改状态
const UptState=(vid:number)=>{
    if(confirm("您确定要禁用吗?")){
    axios.get("https://localhost:7185/api/User/UserState",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert("修改状态成功");
           Shows();
        }else{
            alert("修改状态失败");
            return;
        }
    })
}
}


//前往修改
const Getupt=(vid:number)=>{
    touer.push({path:'/UptUse',query:{id:vid}});
}

























onMounted(() => {
    glq();
})

//验证是否登录
const glq=()=>{
    if(info.find.name==""){
        alert("请您先登录");
        touer.push({path:"/DL"});
    }
}



















</script>

<style scoped>

</style>